<route lang="json5">
{
  meta: {
    auth: true,
  },
}
</route>

<template>
  <div class="h-full flex flex-col">
    <div class="flex items-center overflow-x-scroll">
      <a-form :model="filterInfo" layout="inline">
        <a-form-item field="str1" label="str1">
          <a-input v-model="filterInfo.str1" placeholder="please enter str1" />
        </a-form-item>
        <a-form-item field="str2" label="str2">
          <a-input v-model="filterInfo.str2" placeholder="please enter str2" />
        </a-form-item>
        <a-form-item field="type1" label="type1">
          <a-select v-model="filterInfo.type1" placeholder="Please select type1" multiple allow-clear>
            <a-option :value="0">type-0</a-option>
            <a-option :value="1">type-1</a-option>
            <a-option :value="2">type-2</a-option>
            <a-option :value="3">type-3</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="type2" label="type2">
          <a-radio-group type="button" v-model="filterInfo.type2">
            <a-radio :value="0">type-0</a-radio>
            <a-radio :value="1">type-1</a-radio>
            <a-radio :value="2">type-2</a-radio>
            <a-radio :value="3">type-3</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="date1" label="date1">
          <a-date-picker v-model="filterInfo.date1" placeholder="Please select date1" />
        </a-form-item>
        <a-form-item field="date2" label="date2">
          <a-range-picker v-model="filterInfo.date2" show-time v-bind="_DATE_PICKER_DEFAULT" />
        </a-form-item>
      </a-form>
      <a-button @click="router.push({ path: '/often/table/add' })" status="warning" class="mr-2">新增</a-button>
      <a-button @click="getData" :loading="inLoading">刷新</a-button>
    </div>
    <use-n-progress :inanimate="inDebounce" />
    <a-table
      row-key="id"
      class="!h-0 flex-1"
      :scroll="{ y: '100%', x: '100%' }"
      :pagination="pagination"
      :data="dataList"
      :loading="inLoading"
      :row-selection="{
        type: 'checkbox',
        showCheckedAll: true,
        onlyCurrent: false, // false:切换页面时依旧可以选择   true:传统模式
      }"
      v-on="handlePageChange"
      v-model:selected-keys="selectedKeys"
      :columns="[
        { title: 'ID', dataIndex: 'id', width: 170 },
        { title: 'name', slotName: 'name', width: 100 },
        { title: 'content', dataIndex: 'content', width: 100 },
        { title: 'ip', dataIndex: 'ip', width: 150 },
        { title: 'phone', dataIndex: 'phone', width: 100 },
        { title: 'time', dataIndex: 'time', width: 150 },
        { title: '状态', slotName: 'status', width: 80 },
        { title: '操作', slotName: 'tools', width: 170, fixed: 'right', align: 'center' },
      ]"
    >
      <template #name="{ record }">
        <a-input v-model="record.name" @change="handleChangeName(record)" />
      </template>

      <template #status="{ record }">
        <a-switch
          type="round"
          :model-value="record.status"
          :checked-value="1"
          :unchecked-value="0"
          @change="handleChangeStatus(record)"
        />
      </template>

      <template #tools="{ record }">
        <a-button
          @click="router.push({ path: '/often/table/' + record.id, query: { name: record.name } })"
          status="warning"
          class="mr-2"
        >
          编辑
        </a-button>
        <a-button @click="handleDelete([record.id])" status="danger">删除</a-button>
      </template>
    </a-table>
    <render-table-select-tool :del="handleDelete" :edit="handleEditGroup" />
  </div>
</template>

<script lang="tsx" setup>
import { getMockList, type IGetMockList } from 'api/test1'
import { remove } from 'lodash-es'

const _DATE_PICKER_DEFAULT = DATE_PICKER_DEFAULT
const router = useRouter()
const DefaultFilter = {
  str1: '',
  str2: '',
  type1: 0,
  type2: 0,
  date1: '',
  date2: [],
}

const { selectedKeys, RenderTableSelectTool } = useTableSelect()
const { dataList, filterInfo, inDebounce, pagination, handlePageChange, inLoading, getData } = useGetData<
  IGetMockList,
  typeof DefaultFilter
>(getMockList, DefaultFilter, {})

async function handleDelete(ids: string[]) {
  await useConfirm({ deep: true })
  await getMockList(ids) // 模拟删除
  console.log('删除', ids)
  if (ids.length === 1) {
    remove(selectedKeys.value, (e: any) => e === ids[0])
  } else {
    selectedKeys.value = []
  }
  await getData()
}

async function handleEditGroup(ids: string[]) {
  const postData = reactive({
    time: new Date(),
    status: false,
  })
  Modal.open({
    title: '批量编辑',
    content: () => (
      <>
        <div>
          <a-form-item field='time' label='时间'>
            <a-date-picker
              v-model={postData.time}
              show-time
              clearable={false}
              format='YYYY-MM-DD HH:mm:ss'
              placeholder='Please select time'
            />
          </a-form-item>
          <a-form-item label='状态'>
            <a-switch type='round' v-model={postData.status} checked-text='开启' unchecked-text='关闭' />
          </a-form-item>
        </div>
      </>
    ),
    async onBeforeOk(done) {
      console.log('批量修改：', { ids, postData })
      await getMockList({})
      done(true)
    },
  })
}

async function handleChangeStatus(e: IGetMockList) {
  await getMockList({})
  e.status = Number(!e.status) as any
}

async function handleChangeName(e: IGetMockList) {
  await getMockList({})
}
</script>
